<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="../lib/jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){ // function 이라는 object 타입을 JSON 패턴으로 넘긴다?!
	$('.div1').css({
		'width' : '100px',
		'height' : '70px',
		'text-align' : 'center',
		'display' : 'inline-block',
		'border' : '1px dotted orange',
		'padding-top' : '40px'
	});
	
	// mnt라는 아이디를 가진 태그의 list 의 짝수번째 폰트색깔 바꾸기
	$('#mnt li:even').css('color', '#0000ff');
	
	$('#river li:first, ul#river li:last').css({
		'color' : '#ff0000',

	});
	
	// li 태그들 중 첫번째 요소의 문자를 굵게하기
	$('li:first-child').css({
		'font-weight' : 'bolder',
		'font-size' : '30px'
	});
	
});
</script>

</head>
<body>

<div class="div1">000000</div>
<div class="div1">111111</div>
<div class="div1">222222</div>
<div class="div1">333333</div>
<div class="div1">444444</div>
<div class="div1">555555</div>

<div>
	<ul id="mnt">
		<li>백두산
		<li>한라산
		<li>금강산
		<li>에베레스트
		<li>가지산
		<li>뒷산
	</ul>
</div>

<div>
	<ul id='river'>
		<li>한강
		<li>낙동강
		<li>두만강
		<li>강강
		<li>금강
		<li>은상
		<li>동강
	</ul>
</div>

</body>
</html>